<template>
  <el-form
    ref="form"
    :model="form"
    :rules="rules"
    label-width="80px"
  >
    <el-row>
      <el-col :span="24">
        <el-form-item
          label="短信类型"
          prop="type"
        >
          <el-radio-group
            v-model="form.type"
            size="medium"
          >
            <el-radio-button label="1">胜券短信</el-radio-button>
            <el-radio-button label="2">阿里大于</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item
          label="短信模板"
          prop="templateId"
        >
          <el-select
            v-model="form.templateId"
            placeholder="请选择短信模板"
          >
            <el-option
              v-for="item in templateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>

          </el-select>

        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item
          label="短信签名"
          prop="sign"
        >
          <el-select
            v-model="form.sign"
            placeholder="请选择短信模板"
          >
            <el-option
              v-for="item in signList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item
          label="短信内容"
          prop="content"
        >
          <el-input
            v-model="form.content"
            type="textarea"
            :rows="5"
            placeholder="请商家以56个字编辑短信内容，系统默认包含8个字：【胜券】退订TD"
            maxlength="56"
            show-word-limit
          >
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item
          label="短信测试"
          prop="type"
        >
          <el-input
            v-model="form.phone"
            placeholder="请输入测试手机号"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item>
          <el-button
            type="primary"
            @click="testConnect"
          >
            链接测试
          </el-button>
          <el-button
            type="primary"
            @click="previewContent"
          >
            内容预览
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
export default {
  name: 'MessageForm',
  data() {
    return {
      templateList: [
        {
          label: '520短信模板',
          value: "1"
        },
        {
          label: '618短信模板',
          value: "2"
        },
        {
          label: '双11短信模板',
          value: "3"
        }
      ],
      signList: [
        {
          label: '百胜软件',
          value: "1"
        },
        {
          label: '百胜营销',
          value: "2"
        }
      ],
      form: {
        name: '', // 节点名称
        type: '1', // 短信类型
        templateId: '', // 短信模板
        sign: '', // 短信签名
        content: '', // 短信内容
        phone: '' // 短信测试手机号
      },
      rules: {
        templateId: [{ required: true, message: '请选择短信模板', trigger: 'change' }],
        sign: [{ required: true, message: '请选择短信签名', trigger: 'change' }],
        content: [{ required: true, message: '请填写短信内容', trigger: 'blur' }]
      }
    }
  },
  methods: {
    init(params) {
      const initForm = {
        type: "1",
        templateId: '', // 短信模板
        sign: '', // 短信签名
        content: '', // 短信签名
        phone: '' // 短信测试手机号
      }
      this.form = { ...initForm, ...params }
    },
    previewContent() {
      const message = `${this.form.content}【胜券】退订TD`
      this.$alert(message)
    },
    testConnect() {
      if (!/^1[3456789]\d{9}$/.test(this.form.phone)) {
        this.$message({
          message: "请输入正确的手机号",
          type: "error"
        });
        return false;
      }
      this.$message({
        message: "发送成功",
        type: "success"
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.monthGroup {
  .el-checkbox {
    width: 50px;
  }
}
</style>
